3D轉換跟2D轉換不同的是使用三維坐標系(多了Z軸座標)

1.三維坐標系是由三個軸共同組成的

• X軸 : 水平向右 注意: X軸右邊是正值 左邊是負值
• Y軸 : 垂直向下 注意: Y軸下面是正值 上面是負值
• Z軸 : 垂直屏幕 注意: 往外面是正值 往裡面是負值

2.3D 移動 translate3d

3D移動是在2D移動的基礎上多加了Z軸方向

• transform:translateX(100px) : 僅僅在x軸上移動
• transform:translateY(100px) : 僅僅在y軸上移動
• transform:translateZ(100px) : 僅僅在z軸上移動

(注意 : translateZ一般用px單位)

• transform:translate3d(x,y,z):xyz代表要移動的軸方向距離)

CSS:
 body {
            /* 透視寫在被觀察元素的父盒子上 */
            perspective: 200px;

        }

        div {
            transition: all 3s;
            width: 200px;
            height: 200px;
            background-color: pink;
            /* transform:translateX(100px);
            transform:translateY(100px); */
            /* transform: translateX(100px) translateY(100px)   translateZ(100px); */
            /* transform: translate3d(400px, 100px, 100px); */
            /* xyz是不能省略的 如果沒有需要寫0 */
        }

            div:hover {
            transform: translate3d(400px, 100px, 100px);
            }
        
HTML:
<div></div>

translated3d

3.透視 perspective

在2D平面產生進大遠小視覺立體，但是只是效果二維的

• 如果想要在網頁產生3D效果需要透視

(理解成3D物體投影在2D平面內)

• 模擬人類的視覺位置，可認為安排一只眼睛去看
• 透視我們也稱為視距:視距就是人的眼睛到屏幕的距離
• 距離視覺點躍進的在平面成像越大，月遠成像越小
• 透視的單位是像素

MDN perspective

(透視寫在被觀察元素的父盒子上)

4.3D旋轉 rotate3d

3D旋轉可以讓元素沿著x,y,z軸或者自定義軸進行旋轉

語法:

• transform:rotateX(45deg) :沿著x軸方向旋轉45度
• transform:rotateY(45deg) :沿著Y軸方向旋轉45度
• transform:rotateZ(45deg) :沿著Z軸方向旋轉45度
• transform:rotate3d(x,y,z,deg) :沿著自定義軸方向旋轉 deg為角度

對於元素旋轉的方向判斷可以使用左手準則

CSS:
  <style>
        body {
            perspective: 300px;
        }

        div {
            width:300px;
height:300px;
background-color: blanchedalmond;
            display: block;
            margin: 100px auto;
            transition: all 2s;
        }

        div:hover {
            /* transform: rotateZ(360deg); */
            /* transform: rotate3d(x,y,z,deg); */
            transform: rotate3d(1, 1, 1, 360deg);
        }
    </style>
HTML:
<div>滑鼠放上去將會旋轉</div>

rotate3d

5.3D呈現 transform-style

• 控制子元素是否開啟三維立體環境
• transform-style:flat 子元素不開啟3d立體空間 (默認
• transform-style:preserve-3d;子元素開始立體空間
• 代碼寫給父級，但是影響的是子盒子
• 這個屬性很重要 後面必用

CSS:
 body {
        perspective: 500px;
    }

    .box {
        position: relative;
        width: 200px;
        height: 200px;
        margin: 100px auto;
        transition: all 2s;
        /* 讓子元素保持3d立體空間 */
        transform-style: preserve-3d;
    }

    .box:hover {
        transform: rotateY(180deg);
    }

    .box div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: pink;
    }

    .box div:last-child {
        background-color: purple;
        transform: rotateX(60deg);
    }
 
 HTML:
     <div class="box">
        <div></div>
        <div></div>
    </div>

transform-style